<clr-modal [(clrModalOpen)]="opened" [clrModalSize]="'xl'">
    <h3 class="modal-title">{{"APP_CIS_RESULT"|translate}}</h3>
    <div class="modal-body" *ngIf="item" style="overflow:auto">
        <div class="clr-row">
            <div class="clr-col-4"></div>
            <div class="clr-col-4">
                <circle-progress
                        [percent]="getPassRate()"
                        [radius]="80"
                        [outerStrokeWidth]="15"
                        [innerStrokeWidth]="15"
                        [space]="-15"
                        [outerStrokeColor]="'#00af00'"
                        [innerStrokeColor]="'#e5e9f2'"
                        [titleFontSize]=20
                        [unitsFontSize]=20
                        [subtitleFontSize]="15"
                        [subtitle]="'PASS RATE'"></circle-progress>
            </div>
            <div class="clr-col-4"></div>
        </div>


        <table class="table">
            <thead>
            <tr>
                <th class="left">{{"APP_NUMBER"|translate}}</th>
                <th class="left">{{"APP_STATUS"|translate}}</th>
                <th class="left">{{"APP_DESCRIBE"|translate}}</th>
                <th class="left">{{"APP_REMEDIATION"|translate}}</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let result of item.results">
                <td class="left">{{result.number}}</td>
                <td>{{result.status}}</td>
                <td class="left">{{result.desc}}</td>
                <td class="left"
                    style="table-layout:word-wrap:break-word;word-break:break-all">{{result.remediation}}</td>
            </tr>
            </tbody>
        </table>

    </div>
</clr-modal>
